<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>选择-学生-错题集详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
    body {
        background: rgba(90, 194, 255, 1);
    }

    .wrapper {
        padding: 15px 15px 42px 15px;
    }

    .head {
        /*height: 188px;*/
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
        border-radius: 10px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .column {
        min-width: 33.3%;
        height: 94px;
        text-align: center;
    }

    .column .count {
        font-size: 24px;
        font-weight: 600;
        color: rgba(231, 109, 0, 1);
        text-align: center;
    }


    .column .txt {
        font-size: 12px;
        font-weight: 400;
        color: rgba(25, 25, 25, 1);
    }

    .items {
        padding: 10px 11px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
        border-radius: 10px;
    }

    .item {
        height: 50px;
        border-bottom: 1px solid rgb(212, 212, 212);
    }

    .item:last-of-type {
        border-bottom: 0;
    }

    .txt {
        font-weight: 500;
        color: rgba(25, 25, 25, 1);
        font-size: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .select {
        min-width: 100px;
        font-size: 15px;
        font-weight: 400;
        color: rgba(191, 191, 191, 1);
    }

    .select img {
        width: 17px;
        height: 16px;
        margin-left: 8px;
    }

    .mt {
        margin-top: 20px;
    }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="wrapper">
            <div v-if="';13;7;8;'.indexOf(';'+reportType+';') != -1">
                <div v-if="dataList.length < 3" class="head" data-flex>
                    <div class="column" v-for="item in dataList" data-flex-box="1" data-flex="cross:center main:center">
                        <div>
                            <div class="count">{{item.errorRate || '0%'}}</div>
                            <div class="txt">{{item.questionTypeName}}</div>
                        </div>
                    </div>
                </div>
                <div v-else class="head" data-flex>
                    <div class="column" v-for="item in dataList" data-flex-box="1" data-flex="cross:center main:center">
                        <div>
                            <div class="count">{{item.errorRate || '0%'}}</div>
                            <div class="txt">{{item.questionTypeName}}</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 学生列表 -->
            <div v-if="';13;7;8;'.indexOf(';'+reportType+';') != -1" class="items">
                <div class="item" v-for="item in listData" @click="handleItem(item)" data-flex="main:justify cross:center">
                    <div class="txt" data-flex-box="1">{{item.nickName}}</div>
                    <div class="select" data-flex="cross:center main:right">
                        <img src="../../image/ui/arrow_right_2.png" alt="">
                    </div>
                </div>
            </div>
            <!-- 课程和小节列表 -->
            <div v-else class="items">
                <div class="item" v-for="item in listData" @click="handleItem(item)" data-flex="main:justify cross:center">
                    <div class="txt" data-flex-box="1">{{item.courseName}}</div>
                    <div class="select" data-flex="cross:center main:right">
                        <img src="../../image/ui/arrow_right_2.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var pageParam = {};
    // reportType 该页面仅限老师
    // 1 错题率，学期列表 看个人 from 学生详情
    // 2 错题率，单元列表 看个人 from 学生详情 -> 错题详情
    // 11 错题率，学期列表 看班级 from 班级详情
    // 12 错题率，单元列表 看班级 from 班级详情
    // 13 错题率，学生列表 看班级 from 班级详情 -> 错题详情
    // 3 学习报告:班级和人的平均分,学期列表 from 学生详情
    // 4 学习报告:班级和人的平均分,单元列表 from 学生详情 -> 错题详情
    // 5 跟读报告:班级和人的平均分,学期列表 from 学生详情
    // 6 跟读报告:班级和人的平均分,单元列表 from 学生详情 -> 跟读分类
    // 7 学习报告:某个单元下班级的平均分,学生列表 from 班级详情->report_detail -> 错题详情 分数上级页面传入
    // 8 跟读报告:某个单元下班级的平均分,学生列表 from 班级详情->report_detail -> 跟读分类 分数上级页面传入
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;

        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                dataList: [],
                listData: [],
                reportType: pageParam.reportType
            }
        });
        if(';7;8;'.indexOf(';'+pageParam.reportType+';') != -1) {
            // 数据上个页面传入
            var title = pageParam.title == '学习报告' ? '班级平均分' : pageParam.title;
            var temp = {
                questionTypeName: title,
                errorRate: pageParam.score
            };
            vm.dataList = [temp];
        }else if(';3;4;5;6;'.indexOf(';'+pageParam.reportType+';') != -1) {
            // 个人得分和班级平均分
            getClassData();
        }else {
            getPageData();
        }
        
        if(';1;11;3;5;'.indexOf(';'+pageParam.reportType+';') != -1) {
            // 课程列表
            getCourseList();
        }else if(';2;12;4;6;'.indexOf(';'+pageParam.reportType+';') != -1) {
            // 单元列表
            getUnitList();
        }else if(';13;7;8;'.indexOf(';'+pageParam.reportType+';') != -1) {
            // 学生列表
            getClassMembers();
        }
    }

    // 获取页面数据
    function getPageData() {
        var url = 'courseReport/findErrorQuestionReport';
        var params = {
            reportType: '5',
            unitId: '',
            courseId: '',
            queryClassesId: pageParam.classId,
            queryStudentId: pageParam.custId
        };
        if(';12;2;'.indexOf(pageParam.reportType) != -1) {
            params.courseId = pageParam.id;
        }else if(pageParam.reportType == '13') {
            params.unitId = pageParam.id;
        }
        var callback = function(data) {
            vm.dataList = data.listData;
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }

    // 个人得分和班级平均分
    function getClassData() {
        var url = 'courseReport/findExercisesReport';
        var params = {
            reportType: ';4;3;'.indexOf(';'+pageParam.reportType+';') != -1 ? '1' : '6',
            unitId: '',
            courseId: '',
            queryStudentId: pageParam.custId,
            queryClassesId: pageParam.classId,
            questionTypeCode: pageParam.questionTypeCode
        };
        if(';6;4;'.indexOf(pageParam.reportType) != -1) {
            params.courseId = pageParam.id;
        }
        var callback = function(data) {
            data = data.listData[0];
            vm.dataList = [
                {errorRate: data.stuScoreValue || '0', questionTypeName: '学生得分'},
                {errorRate: data.classScoreValue, questionTypeName: '班级平均分'}
            ];
        };
        POST(url, params, callback);
    }

    // 班级成员
    function getClassMembers() {
        var url = 'clsClass/findClassAllStudent';
        var params = {
            classesId: pageParam.classId
        };
        var callback = function(data) {
            vm.listData = data.listData;
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }

    // 教材列表
    function getCourseList() {
        var url = 'course/findIndexCourseList';
        var params = {};
        var callback = function(data) {
            vm.listData = data.listData;
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }

    // 小节列表
    function getUnitList() {
        var url = 'course/findCourseChild';
        var params = {
            'courseParentId': pageParam.id
        };
        var callback = function(data) {
            vm.listData = data.listData;
        };
        POST(url, params, callback);
    }

    // 点击item
    function handleItem(item) {
        try {
            if(';2;13;4;7;'.indexOf(';'+pageParam.reportType+';') != -1) {
                // 错题详情
                var id = ';2;4;'.indexOf(';'+pageParam.reportType+';') != -1 ? item.id : pageParam.id;
                fnOpenPublicWin('错题报告','question/question_menus', {
                    error: '1',
                    id: id || pageParam.unitId,
                    custId: ';13;7;'.indexOf(';'+pageParam.reportType+';') != -1 ? item.id : pageParam.custId
                });
            }else if(';1;11;12;3;5;'.indexOf(';'+pageParam.reportType+';') != -1) {
                // 还是当前页面，错题率，学习报告，跟读报告
                var type = parseInt(pageParam.reportType)+1;
                pageParam.reportType = type;
                pageParam.id = item.id; // 小节ID或者课程ID
                pageParam.reload = true;
                fnOpenPublicWin(pageParam.title, 'class/review_data', pageParam);
            }else if(';6;8;'.indexOf(';'+pageParam.reportType+';') != -1) {
                // 跟读分类
                fnOpenPublicWin('跟读报告', 'course1/read_list', {
                    id: pageParam.catalogId,
                    code: item.questionTypeCode,
                    report: '1',
                    custId: pageParam.reportType == '8' ? item.id : pageParam.custId
                });
            }
        }catch(e) {
            // alert(e);
        }
    }
</script>

</html>